<!-- 页面名称 -->
<template>
	<view class="com-tabbar">
    	<view class="cu-bar tabbar">
		    <view class="action" @click="tabbarTap('home')" :class="active=='home'?'cur-active':'cur-def'">
		      <view class="cuIcon-cu-image">
				<image class="img-def" src="/static/images/tabbar-home-def.png"></image>
				<image class="img-active" src="/static/images/tabbar-home.png"></image>
				
		      </view>
		      <view >首页</view>
		    </view> 
			<view class="action" @click="tabbarTap('business')" :class="active=='business'?'cur-active':'cur-def'">
			  <view class="cuIcon-cu-image">
			    <image class="img-def" src="/static/images/tabbar-business-def.png"></image>
			    <image class="img-active" src="/static/images/tabbar-business.png"></image>
			    
			  </view>
			  <view >工商</view>
			</view>
			<view class="action" @click="tabbarTap('finance')" :class="active=='finance'?'cur-active':'cur-def'">
			  <view class="cuIcon-cu-image">
			    <image class="img-def" src="/static/images/tabbar-finance-def.png"></image>
			    <image class="img-active" src="/static/images/tabbar-finance.png"></image>
			    
			  </view>
			  <view >财务</view>
			</view>
		    <view  class="action" @click="tabbarTap('tax')" :class="active=='tax'?'cur-active':'cur-def'">
		      <view class="cuIcon-cu-image">
				   <image class="img-def" src="/static/images/tabbar-tax-def.png"></image>
				   <image class="img-active" src="/static/images/tabbar-tax.png"></image>
		      </view>
		      <view >税筹</view>
		    </view>
		    <view class="action" @click="tabbarTap('user')" :class="active=='user'?'cur-active':'cur-def'">
		      <view class="cuIcon-cu-image">
				<image class="img-def" src="/static/images/tabbar-user-def.png"></image>
				<image class="img-active" src="/static/images/tabbar-user.png" mode="aspectFit"></image>
		
		      </view>
		      <view >我的</view>
		    </view>
		</view>
	</view>
</template>

<script>
export default {
    data() {
		return { 
            
		}
    }, 
	created:function(){
		
	},
	props: {
		active: {
			type: String,
			default:"index"
		} 
	},
    onLoad() {
       
    }, 
    onShow(){
		
    },
    methods: {
		tabbarTap:function(index){  
			this.$emit('update:active', index);
		}
    },
}
</script>

<style lang="scss">
.com-tabbar{
	color:#999;
	background-color: #F8F8F8;
	.action{
		color:#999;
	}
	image{
		width: 40upx;
		height: 40upx;
	}
	.cur-def{
		
		.img-def{
			display: inline-block;
		}
		.img-active{
			display: none!important;
		}
	}
	.cur-active{
		font-family: PingFang SC;
		font-weight: 500;
		color: #FFB506;
		
		background: linear-gradient(122deg, #79C7F8 0%, #6E91E3 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;

		.img-def{
			display: none!important;
		}
		.img-active{
			display: inline-block;
		}
	}
}
</style>
